<template>
  <div class="logBox">
    <div class="logBox-header">
      <div class="header-left">
        <router-link to="/"
          ><img src="../assets/img/wangyiyunlogo.png" alt="" />
        </router-link>

        <span>欢迎注册</span>
      </div>
      <router-link to="/regUserIdea">注册页面，调查问卷</router-link>
    </div>
    <div class="logBox-body">
      <div class="body-white">
        <div class="body-header">
          <span>手机号注册</span>
        </div>
        <div class="bodyCenter">
          <div class="body-litBody">
            <div class="body-input">
              <div class="divPhone">
                <input
                  type="text"
                  class="phone"
                  maxlength="11"
                  placeholder="请输入手机号码"
                  v-model="phone"
                  @blur="getPhone()"
                />
                <br />
                <p
                  id="idPhone"
                  :class="el == true ? 'warningone' : 'successone'"
                  v-if="flagone"
                >
                  {{ phoneContent }}
                </p>
              </div>
              <div class="divNick">
                <input
                  type="text"
                  class="nickname"
                  placeholder="请输入昵称"
                  v-model="nickname"
                  @keyup="getNickName()"
                />
                <br />
                <p
                  id="idNick"
                  :class="elNick ? 'warningone' : 'successone'"
                  v-if="flagtwo"
                >
                  {{ nickContent }}
                </p>
              </div>
              <div class="divPwd">
                <input
                  type="password"
                  class="pwd"
                  placeholder="请输入您的密码"
                  v-model="pwd"
                  @keyup="getPwd()"
                  @focus="getPwdShow()"
                />
                <br />

                <p
                  id="idPwd"
                  :class="elPwdNull ? 'warningone' : 'successone'"
                  v-if="pwdClick"
                >
                  {{ pwdContent }}
                </p>
              </div>
              <div class="divAgaPWd">
                <input
                  type="text"
                  placeholder="请再次输入密码"
                  class="againpwd"
                  v-model="againpwd"
                  @keyup="getAgPwd()"
                />
                <p
                  id="idAgaPwd"
                  :class="elAgaPwd ? 'warningone' : 'successone'"
                  v-if="agappWd"
                >
                  {{ agpwdContent }}
                </p>
              </div>
              <div class="codeDiv">
                <input
                  type="text"
                  placeholder="请输入验证码"
                  class="code"
                  v-model="code"
                  @keyup="getCode()"
                />
                <button class="sendCode" @click="getSendCode()">
                  {{ sendCodeMess }}
                </button>

                <p
                  id="idCode"
                  :class="elCode ? 'warningone' : 'successone'"
                  v-if="codeVer"
                >
                  {{ codeContent }}
                </p>
              </div>
            </div>
            <div class="body-logButton">
              <button class="register" @click="getReg()">注册</button>
            </div>
          </div>
          <hr />
          <div class="body-footer">
            <router-link to="/login" class="toLogin"
              >已有账号？快速登录</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flagone: false,
      flagtwo: false,
      phone: "",
      nickname: "",
      pwd: "",
      againpwd: "",
      code: "",
      sendCodeMess: "发送验证码",
      el: "",
      elNick: "",
      elPwdNull: "",
      // elPwdBoth: "",
      // elPwdLen: "",
      elAgaPwd: "",
      elCode: "",
      elRegister: "",
      phoneContent: "",
      nickContent: "",
      pwdContent: "",
      agpwdContent: "",
      codeContent: "",
      regContent: "",
      agappWd: "",
      AgapWdShow: "",
      // agaPwdShowsValue: "",
      pwdClick: "",
      regVer: "",
      codeVer: "",
      isRegisterInfoValid: true,
    };
  },
  mounted() {},
  methods: {
    //手机号码是否被注册 接口
    getPhone() {
      var url = "cellphone/existence/check?phone=" + this.phone;
      this.axios.get(url).then(res => {
        console.log("reg:", res);
        if (res.data.exist == '1') {
          this.flagone = true;
          this.phoneContent = "该手机号码已经被注册了";
          this.el = true;
          this.isRegisterInfoValid = false;
          return;
        }
        var regex = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (regex.test(this.phone) == false || this.phone == " ") {
          this.flagone = true;
          this.phoneContent = "请输入正确的手机号码";
          this.el = true;
          this.isRegisterInfoValid = false;
          return;
        }
        this.phoneContent = "手机号码正确";
        this.flagone = true;
        this.el = false;
      });
    },

    getNickName() {
      var length = this.nickname.length;
      var LettersReg = /^[a-zA-Z]{4,}$/;
      var ChineseReg = /^[\u4e00-\u9fa5]{2,}$/;
      this.flagtwo = true;
      if (LettersReg.test(this.nickname) || ChineseReg.test(this.nickname)) {
        this.nickContent = "昵称正确";
        this.elNick = false;
        return;
      }
      this.nickContent = "昵称不少于4个字母或2个汉字";
      this.elNick = true;
      this.isRegisterInfoValid = false;
    },

    getPwd() {
      this.pwdClick = true;
      let BothReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      if (
        this.pwd.replace(/(^\s*)|(\s*$)/g, "") != "" &&
        BothReg.test(this.pwd)
        // &&
        // this.pwd.length >= 8 &&
        // this.pwd.length <= 20
      ) {
        this.pwdContent = "密码格式正确";
        this.elPwdNull = false;
        return;
      }
      this.pwdContent = "密码不含空格,由字母、数字组成,长度为8-20位";
      this.elPwdNull = true;
      this.isRegisterInfoValid = false;
    },

    getAgPwd() {
      this.getPwd();
      this.agappWd = true;
      if (this.pwd.length == 0) {
        this.elAgaPwd = true;
        this.agpwdContent = "请先完成上一空行";
        this.isRegisterInfoValid = false;
        return;
      }
      if (this.againpwd == this.pwd) {
        this.elAgaPwd = false;
        this.agpwdContent = "两次输入密码一致";
        return;
      }
      this.elAgaPwd = true;
      this.agpwdContent = "两次输入密码不一致";
      this.isRegisterInfoValid = false;
    },
    //发送验证码 接口
    getSendCode() {
      var url = "captcha/sent?phone=";
      this.axios.post(url, this.phone),
        then(res => {
          console.log("getCode:", res);
          this.sendCodeMess = "已发送验证码";
        });
    },
    //校对验证码 接口
    getCode() {
      var url = `/captcha/verify?phone=${this.phone}&captcha=${this.code}`;
      this.axios.get(url).then(res => {
        console.log("getCode:", res);
        this.getPhone();
        this.codeVer = true;
        if (res.data == this.code) {
          this.codeContent = "验证码正确";
          this.elCode = false;
          return;
        }
        this.codeContent = "验证码错误";
        this.isRegisterInfoValid = false;
        this.elCode = true;
      });
    },

    getReg() {
      this.getPhone();
      this.getNickName();
      this.getPwd();
      this.getAgPwd();
      this.getCode();
      if (this.isRegisterInfoValid) {
        alert("请先按照提示填写信息");
        return;
      }
      var url = "register/cellphone";
      this.axios
        .post(url, {
          phone: this.phone,
          password: this.pwd,
          captcha: this.code,
          nickName: this.nickname,
        })
        .then(res => {
          console.log("register:", res);
          if (res.data == 200) {
            alert("注册成功");
            this.$router.push("/login");
          }
        });
    },
  },
};
</script>
<style>
input {
  padding: 5px;
}
p {
  padding-top: 3px;
  margin: 0 !important;
}
.warningone {
  margin: 20px 0 20px 0;
  font-size: 12px;
  color: rgb(236, 10, 10);
}
.successone {
  margin: 20px 0 20px 0;
  color: rgb(62, 237, 62);
  font-size: 12px;
}
</style>
<style scoped src="../assets/css/register.css"></style>
